<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app>div {
            width: 300px;
            height: 100px;
            border: 1px solid black;
            margin-left: 260px;
            margin-top: -100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <table border="1" frame="box">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.gender}}</td>
                <td><button @click="delFunc(index)">×</button></td>
            </tr>
        </table>
        <div>
            <span>姓名<input type="text" v-model="user.name"/></span>
            <br>
            <span>年龄<input type="text" v-model="user.age"/></span>
            <br>
            <span>性别<input type="text" v-model="user.gender"/></span>
            <br>
            <button @click="adduser">添加</button>
            <button @click="sort">排序</button>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {

                user: {
                    'name': '',
                    'age': '',
                    'gender': ''
                },
                users: [{
                    'name': '张三',
                    'age': '18',
                    'gender': '男'
                }, {
                    'name': '李四',
                    'age': '19',
                    'gender': '女'
                }, {
                    'name': '王五',
                    'age': '30',
                    'gender': '男'
                }, {
                    'name': '小淘气',
                    'age': '18',
                    'gender': '女'
                }]
            },
            methods: {
                adduser: function() {
                    var myid = this.users.length;
                    this.users.push({
                        "id": myid + 1,
                        "name": this.user.name,
                        "age": this.user.age,
                        "gender": this.user.gender
                    });

                },
                delFunc: function(index) {
                    confirm("确认要删除么？") && this.users.splice(index, 1);
                    // if(confirm("确认要删除么？") ){
                    //     this.cartData.splice(index, 1);
                    // }
                },
                sort() {
                    var x = false;
                    this.x = !this.x;
                    if (this.x) {
                        this.users.sort((a, b) => {
                            return a.age - b.age;
                        });
                    } else {
                        this.users.sort((a, b) => {
                            return b.age - a.age;
                        });
                    }

                },
            }
        })
    </script>
</body>

</html>